<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="9">
        <div class="accounts-box">
          <p class="accounts-tit">帐号管理</p>
          <el-row>
            <el-col :span="12">
              <p class="accounts-con">绑定手机</p>
              <p class="accounts-con">{{admin.storeUserPhone}}</p>
              <!--<p class="accounts-con accounts-btn"><span>换绑</span></p>-->
            </el-col>
            <el-col :span="12">
              <p class="accounts-con">员工数量</p>
              <p class="accounts-con">{{admin.realityStoreSonNum}}</p>
              <p class="accounts-con accounts-btn" @click="checkPeople"><span>查看</span></p>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="14" :offset="1">
        <div class="notice-box">
          <p class="accounts-tit">系统公告</p>
          <el-link style="float: right" @click="moreNotice">更多<i class="el-icon-d-arrow-right"></i> </el-link>
          <div class="clear"></div>
          <el-row v-for="item in notice" :key="item.afficheId" class="margin-top">
            <el-col :span="20" class="notice-con">
              {{item.afficheTitle}}
            </el-col>
            <el-col  :span="4" style="text-align: right">
              {{timestampToTime(item.createTime)}}
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="data-box">
          <p class="accounts-tit">待办订单</p>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="orderCode"
              align="center"
              :show-overflow-tooltip='true'
              label="订单号">
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              label="下单时间">
              <template slot-scope="scope">
                {{timestampToTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalDiscountsMoney"
              align="center"
              label="下单金额">
              <template slot-scope="scope">
                {{scope.row.totalDiscountsMoney}}元
              </template>
            </el-table-column>
            <el-table-column
              prop="createName"
              align="center"
              label="经办人">
            </el-table-column>
            <el-table-column
              prop="orderTypeEnum"
              align="center"
              label="订单类型">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="goDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-col>
      <el-col :span="11" :offset="1">
        <div class="data-box">
          <p class="accounts-tit">数据概览</p>
          <el-row  class="margin-top">
            <el-col :span="8">
              <el-statistic title="待发货">
                <template slot="formatter"> {{orderData.orderStatus2101}} </template>
              </el-statistic>
            </el-col>
            <el-col :span="8">
              <el-statistic title="已发货">
                <template slot="formatter"> {{orderData.orderStatus2102}} </template>
              </el-statistic>
            </el-col>
            <el-col :span="8">
              <el-statistic title="已取消">
                <template slot="formatter"> {{orderData.orderStatus2010}} </template>
              </el-statistic>
            </el-col>
          </el-row>
        </div>
        <div class="data-box">
          <p class="accounts-tit">营收数据</p>
          <el-row  class="margin-top">
            <el-col :span="8">
              <el-statistic title="收益总额">
                <template slot="formatter"> {{(orderData.totalDiscountsMoney - orderData.totalRealityMoney).toFixed(2)}} </template>
              </el-statistic>
            </el-col>
            <el-col :span="8">
              <el-statistic title="进货总额">
                <template slot="formatter"> {{orderData.totalRealityMoney}} </template>
              </el-statistic>
            </el-col>
            <el-col :span="8">
              <el-statistic title="销售总额">
                <template slot="formatter"> {{orderData.totalDiscountsMoney}} </template>
              </el-statistic>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>


    <el-dialog title="公告列表" width="70%" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" style="width: 100%">
        <el-table-column property="afficheTitle" align="center" label="公告名称"></el-table-column>
        <el-table-column property="readStatus"  align="center" label="阅读状态">
          <template slot-scope="scope">
            {{scope.row.readStatus==0?'未读':'已读'}}
          </template>
        </el-table-column>
        <el-table-column property="createTime"  align="center" label="发布时间" >
          <template slot-scope="scope">
            {{timestampToTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column property="address" width="200px"  align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="checkNotice(scope.row)">查看详情</el-button>
            <el-button size="mini" type="danger" @click="deleteNotice(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>

    <el-dialog :title="afficheTitle" width="70%" :visible.sync="noticeDetail"  @close="closeDialog">
      <p v-html="afficheContent"></p>
    </el-dialog>
  </div>
</template>

<script>
import {getStoreUserAdmin,getAfficheAll,getOrderBacklogList,countOrderStatusMap} from '@/api/statistics'
import {getAfficheByMerchantId,getAfficheById,updateReadStatus,deleteStoreUserAffiche}  from '@/api/notice/notice.js'
export default {
  name: "statistics",
  data(){
    return{
      admin:{},
      notice:{},
      tableData:[],
      orderData:{},
      gridData:[],
      dialogTableVisible:false,
      noticeDetail:false,
      afficheContent:'',
      afficheTitle:'',
    }
  },
  mounted() {
    this.getAdmin()
    this.getNotice()
    this.getTableList()
    this.getData()
  },
  methods:{
    //查看员工
    checkPeople(){
      this.$router.push({
        path: '/staffManagement',
        query: {

        }
      });
    },
    // 更多公告
    async moreNotice(){
      let res=await getAfficheByMerchantId()
      this.dialogTableVisible=true
      this.gridData=res.body
    },
    //删除公告
    deleteNotice(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let body={
          "afficheMerchantId": row.afficheMerchantId,
          "storeCoding": localStorage.getItem('storeCoding')
        }
        let res=await deleteStoreUserAffiche({body})
        this.moreNotice()
        this.getNotice()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async checkNotice(row){

      let body={
        "afficheId": row.afficheId,
        "storeCoding": localStorage.getItem('storeCoding')
      }
      this.chagenReadStatus(row)
      let res=await getAfficheById({body})
      this.afficheContent=res.body.afficheContent
      this.afficheTitle=res.body.afficheTitle
      this.noticeDetail=true
    },
    async chagenReadStatus(row){
      console.log(row)
      let body={
        "afficheMerchantId": row.afficheMerchantId,
        "storeCoding": localStorage.getItem('storeCoding')
      }

      let res=await updateReadStatus({body})

    },
    closeDialog(){
      this.moreNotice()
    },
    // 详情
    goDetail(row){
      if(row.orderTypeEnum=='用户'){

        this.$router.push({
          path: '/userDillDetail',
          query: {
            orderId: row.orderId
          }
        });

      }else{
        this.$router.push({
          path: '/billDetail',
          query: {
            orderId: row.orderId
          }
        });
      }


    },
    // 获取手机号和员工数
    async getAdmin(){
      let res = await getStoreUserAdmin()
      this.admin=res.body
      localStorage.setItem('storeId',this.admin.storeId)
      localStorage.setItem('storeCoding',this.admin.storeCoding)
    },
    // 获取公告
    async getNotice(){
      let body={
        storeCoding:localStorage.getItem('storeCoding')
      }
      let res=await getAfficheByMerchantId({body})
      this.notice=res.body
    },
    // 获取待办列表
    async  getTableList(){
      let body={
        storeCoding:localStorage.getItem('storeCoding')
      }
      let res=await  getOrderBacklogList({body})
      this.tableData=res.body

    },
    // 数据概览
    async getData(){
      let body={
        storeCoding:localStorage.getItem('storeCoding')
      }
      let res=await  countOrderStatusMap({body})
      this.orderData=res.body

    },
    timestampToTime(timestamp) {
      var time = this.dayjs(timestamp).format("YYYY-MM-DD");
      // var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var Y = date.getFullYear() + '-';
      // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      // var D = date.getDate() + ' ';
      return time;
    },
  }
}
</script>

<style scoped lang="scss">
.clear{
  clear: both;
}
.accounts-box{
  background: rgb(51, 51, 51);
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.accounts-tit{
  margin: 20px;
}
.accounts-con{
  text-align: center;
  line-height: 39px;
}
.notice-box{
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(61,78,110,0.16);
  padding: 20px;
  overflow: hidden;
}
.notice-box .accounts-tit{
  float: left;
  margin: 0;
}
.notice-con{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.margin-top{
  margin-top: 10px;
}
.data-box{
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(61,78,110,0.16);
  padding: 20px;
  overflow: hidden;
  margin-top: 20px;
}
.data-box .accounts-tit{
  margin: 0;
}
.data-menu-box{
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(61,78,110,0.16);
  padding: 20px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}
.data-menu-box p{
  line-height: 30px;
}
.compare{
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.compare span{
  color: red;
}
.accounts-btn span:hover{
  text-decoration: underline;
  cursor: pointer;
}
</style>

